<template>
  <div class="register-background">
    <div class="overlay"></div> <!-- 添加透明蒙版 -->
    <el-container class="register">
      <el-card class="register-card">
        <el-header>
          <h2 class="register-title">注册</h2>
        </el-header>
        <el-main>
          <el-form :model="user" ref="form" label-width="100px" class="register-form">
            <el-form-item label="用户名" prop="username" :rules="rules.usernameRules">
              <el-input v-model="user.username" placeholder="请输入用户名" required />
            </el-form-item>

            <el-form-item label="密码" prop="password" :rules="rules.passwordRules">
              <el-input
                v-model="user.password"
                type="password"
                placeholder="请输入密码"
                @input="checkPasswordStrength"
                required
              />
              <el-progress :percentage="passwordStrength" v-if="passwordStrength > 0" />
            </el-form-item>

            <el-form-item label="邮箱" prop="email" :rules="emailRules">
              <el-input v-model="user.email" placeholder="请输入邮箱" required />
            </el-form-item>

            <el-form-item label="昵称">
              <el-input v-model="user.nickname" placeholder="请输入昵称" />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" class="register-button" @click="registerUser">注册</el-button>
            </el-form-item>
          </el-form>

          <el-alert
            v-if="errorMessage"
            title="错误"
            type="error"
            :closable="false"
            class="error-message"
          >
            {{ errorMessage }}
          </el-alert>

          <el-alert
            v-if="successMessage"
            title="成功"
            type="success"
            :closable="false"
            class="success-message"
          >
            {{ successMessage }}
          </el-alert>
        </el-main>
      </el-card>
    </el-container>
  </div>
</template>

<script>
export default {
  name: 'UserRegister',
  data() {
    return {
      user: {
        username: '',
        password: '',
        email: '',
        nickname: ''
      },
      passwordStrength: 0,
      rules: {
        usernameRules: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        passwordRules: [{ required: true, message: '请输入密码', trigger: 'blur' }],
        emailRules: [{ required: true, message: '请输入邮箱', trigger: 'blur' }]
      },
      errorMessage: '',
      successMessage: ''
    };
  },
  methods: {
    checkPasswordStrength() {
      const password = this.user.password;
      let strength = 0;

      if (password.length > 6) strength += 1; // 长度大于6
      if (/[A-Z]/.test(password)) strength += 1; // 包含大写字母
      if (/[a-z]/.test(password)) strength += 1; // 包含小写字母
      if (/[0-9]/.test(password)) strength += 1; // 包含数字
      if (/[^A-Za-z0-9]/.test(password)) strength += 1; // 包含特殊字符

      this.passwordStrength = strength * 20; // 转换为百分比
    },

    async registerUser() {
      try {
        // TODO: 处理注册逻辑
        // 假设注册成功
        this.successMessage = '注册成功！欢迎！';
        this.errorMessage = ''; // 清除错误信息
      } catch (error) {
        this.errorMessage = '注册失败，请重试！';
        this.successMessage = ''; // 清除成功信息
      }
    }
  }
};
</script>


<style scoped>
.register-background {
  background: linear-gradient(to right, #89d2d6, #4facfe);
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative; /* 使子元素绝对定位 */
}

.overlay {
  position: absolute; /* 使蒙版覆盖整个背景 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(248, 248, 248, 0.5); /* 透明黑色蒙版 */
  z-index: 1; /* 确保蒙版在背景之上 */
}

.register-card {
  width: 400px;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  background-color: rgba(255, 255, 255, 0.35);
  position: relative; /* 确保卡片在蒙版之上 */
  z-index: 2; /* 确保卡片在蒙版之上 */
  margin-left: 35%;
}

.register-title {
  text-align: center;
  margin-bottom: 20px;
  color: #333;
}

.register-form {
  margin-top: 10px;
}

.register-button {
  width: 100%;
  background-color: #409eff; /* Primary color */
  color: white;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.register-button:hover {
  background-color: #66b1ff; /* Lighter blue on hover */
}

.el-input__inner {
  border-radius: 5px; /* Rounded input fields */
  border: 1px solid #dcdfe6; /* Border color */
}

.el-alert {
  margin-top: 20px;
  border-radius: 5px;
}

.success-message {
  margin-top: 20px;
}

.error-message {
  margin-top: 20px;
}
</style>
